import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Input, Button } from '@tarojs/components'
import {AtTag,AtButton,AtInput} from 'taro-ui'
import './setpatienttag.css'
import app from '../../../../main.js'
import { emit } from 'cluster';

export default class SetPatientTag extends Component {
    config = {
        navigationBarTitleText: '设置患者标签'
    }
    constructor () { 
        super(...arguments); 
        this.state = {
            patient_id: this.$router.params.patient_id,
            selecteds: [],
            all: [],
            value: ''
        }
    }

    getSelecteds() {
        var me = this;
        let data = {}
        let arr = []
        app.get('web/doctor/get', data, (persons)=>{
            let id = persons.data.result.id
            app.get('web/patientlabel/patient_labels', {patient_id: this.state.patient_id}, function(res) {
                let list = res.data.result.list
                for(let i = 0; i < list.length; i++){
                    if(id == list[i].doctor_id){
                        arr.push(list[i])
                    }
                }
                me.setState({
                    selecteds: arr
                },()=>{ 
                    me.concatSelected()
                });
            });
        })
    }

    getAll() {
        var me = this;
        app.get('web/patientlabel/many', {}, function(res) {
            var list = res.data.result.list;
            for (var i = 0, length = list.length; i < length; i++) {
                list[i].checked = false;
            }
            me.setState({
                all: list
            }, () => {
                me.getSelecteds()
            });
        });
    }

    // 判断标签是否选中状态
    concatSelected() {
        var selecteds = this.state.selecteds;
        console.log(selecteds)
        var all = this.state.all;
        for (var i = 0; i < all.length; i++) {
            var a_item = all[i];
            console.log(a_item)
            for (var j = 0; j < selecteds.length; j++) {
                var s_item = selecteds[j];
                console.log(s_item)
                if (s_item.id == a_item.id) {
                    a_item.checked = true;
                    break;
                }
            }
        }
        console.log(all)
        this.setState({
            all: all
        });
    }

    componentDidMount () {
        this.getAll()
    }

    // 点击上方标签
    clickTopTag(tag) {
        var selecteds = this.state.selecteds;
        var all = this.state.all;

        for (var i = 0; i < selecteds.length; i++) {
            var item = selecteds[i];
            if (item.id == tag.id) {
                selecteds.splice(i, 1);
            }
        }

        for (var i = 0; i < all.length; i++) {
            var item = all[i];
            if (item.id == tag.id) {
                item.checked = false;
            }
        }

        this.setState({
            selecteds: selecteds,
            all: all
        });
    }

    // 点击下方标签
    clickBottomTag(tag) {
        var selecteds = this.state.selecteds;
        var all = this.state.all;

        for (var i = 0; i < all.length; i++) {
            var item = all[i];
            if (item.id == tag.id) {
                item.checked = !item.checked;
            }
        }

        for (var i = 0; i < selecteds.length; i++) {
            var item = selecteds[i];
            if (item.id == tag.id) {
                selecteds.splice(i, 1);
            }
        }

        if (tag.checked) {
            selecteds.push(tag);
        }

        this.setState({
            selecteds: selecteds,
            all: all
        });
    }

    onChange(e) {
        // console.log(e);
        this.setState({
            value: e.detail.value
        });
    }

    // 添加标签
    addTag() {
        var me = this;
        var value = this.state.value;
        if (!app.isEmpty(value)) {
            app.post('web/patientlabel/create_label', {name: value}, function(res) {
                if (res.data.status == 200) {
                    var all = me.state.all;
                    var result = res.data.result;
                    result.checked = false;
                    all.push(result);
                    me.setState({
                        all: all
                    })
                } else {
                    app.toast('添加失败');
                }
                me.setState({
                    value: ''
                });
            });
        }
    }

    // 保存
    save() {
        var selecteds = this.state.selecteds;
        var ids = [];
        for (var i = 0; i < selecteds.length; i++) {
            ids.push(selecteds[i].id);
        }
        ids = ids.join(',');
        let label_ids = ids == '' || ids == undefined || ids == null ? 0 : ids
        app.post('web/patientlabel/set_patient_labels', {patient_id: this.state.patient_id, label_ids: label_ids}, function(res) {
            if (res.data.status == 200) {
                app.success('保存成功', function(res) {
                    setTimeout(() => {
                        Taro.navigateBack({
                            delta: 1
                        });
                    }, 1000);
                });
            } else {
                app.toast('保存失败');
            }
        })
    }

    render () {
        return (
            <View>
                <View className='all'>
                    <View className='top-tag'>
                        {
                            this.state.selecteds.map((item) => {
                                return <AtTag className='t_tag' active={true} onClick={this.clickTopTag.bind(this, item)}>{item.name}</AtTag>
                            })
                        }
                        <View className='box'>
                            <View className ='input'>
                                <Input
                                    // name='value'
                                    className='text'
                                    type='text'
                                    value={this.state.value}
                                    onInput={this.onChange.bind(this)}
                                    placeholder='输入新标签'
                                />
                            </View>
                            <AtTag
                                name='tag-3'
                                type='text'
                                className='tag-nosel'
                                onClick={this.addTag.bind(this)}
                            >
                            +
                            </AtTag>
                    </View>
                    </View>
                </View>
                <View className='tip'>所有患者标签</View>
                <View className='top'>
                    <View className='t_view'>
                        {
                            this.state.all.map((item) => {
                                return <AtTag className='t_tag' active={item.checked ? true : false} onClick={this.clickBottomTag.bind(this, item)}>{item.name}</AtTag>
                            })
                        }
                    </View>
                </View>
                <View className='bottom'>
                    <View className='btm'>
                        <AtButton type='primary' onClick={this.save.bind(this)}>保存</AtButton>
                    </View>
                </View>
            </View>
        );
    }
}